<div class="row">
  <div class="col-12">
    <h2 class="mb-4">{{ 'SYSTEM_OVERVIEW' | translate }}</h2>
  </div>
</div>

<div class="row mb-4">
  <div class="col-md-3 mb-3">
    <div class="card text-center">
      <div class="card-body">
        <h5 class="card-title text-primary">{{ $ctrl.stats.total_tickets }}</h5>
        <p class="card-text">{{ 'TOTAL_TICKETS' | translate }}</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 mb-3">
    <div class="card text-center">
      <div class="card-body">
        <h5 class="card-title text-warning">{{ $ctrl.stats.pending_tickets }}</h5>
        <p class="card-text">{{ 'PENDING_TICKETS' | translate }}</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 mb-3">
    <div class="card text-center">
      <div class="card-body">
        <h5 class="card-title text-success">{{ $ctrl.stats.resolved_tickets }}</h5>
        <p class="card-text">{{ 'RESOLVED_TICKETS' | translate }}</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 mb-3">
    <div class="card text-center">
      <div class="card-body">
        <h5 class="card-title text-info">{{ $ctrl.stats.pending_todos }}</h5>
        <p class="card-text">{{ 'PENDING_TODOS' | translate }}</p>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0">{{ 'RECENT_TICKETS' | translate }}</h5>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>{{ 'TICKET_NUMBER' | translate }}</th>
                <th>{{ 'TITLE' | translate }}</th>
                <th>{{ 'STATUS' | translate }}</th>
                <th>{{ 'CREATED_DATE' | translate }}</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="ticket in $ctrl.recentTickets">
                <td>{{ ticket.id }}</td>
                <td>{{ ticket.title }}</td>
                <td>
                  <span class="badge" ng-class="{
                    'badge-warning': ticket.status === 'pending',
                    'badge-info': ticket.status === 'in_progress',
                    'badge-success': ticket.status === 'resolved'
                  }">{{ ticket.status | translate }}</span>
                </td>
                <td>{{ ticket.createTime }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>